import { message, Modal } from 'antd'
import { createForm } from '@formily/core'
import { FormProvider } from '@formily/react'
import { request, useRequest } from 'umi';
import { renderFormFields } from '@/utils/render/field';
import { useEffect } from 'react';
const form = createForm({
  validateFirst: true,
})
export default function ({ title, visible, onOk, onCancel, row, data = [], fields = [] }) {
  const options: any = data.reduce((memo, item) => {
    let value = item.value;
    if (Object.keys(row).length > 0 && item.name === 'url') {
      value = value.replace(/:([^/]+)/g, (match, key) => row[key]);
    }
    memo[item.name] = value;
    return memo
  }, {});
  const actionQuery = useRequest(({ method, url, data }) => request(url, { method, data }),
    {
      manual: true,
      onSuccess(data) {
        message.success(data.message);
        onOk();
      },
      formatResult(res) {
        return res;
      }
    });
  useEffect(() => {
    if (visible && row) {
      form.setValues(row);
    }
  });
  return (
    <Modal
      title={title}
      visible={visible}
      onOk={() => {
        actionQuery.run({ url: options.url, method: options.method, data: form.values });
      }}
      onCancel={onCancel}
      destroyOnClose
      maskClosable={false}
      forceRender
    >
      <FormProvider form={form}>
        {renderFormFields(fields)}
      </FormProvider>
    </Modal>

  )
}